<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/28/028
  Time: 16:55
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>学生信息编辑</title>

    <!--data table-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css" />

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">

    <%--<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/static/js/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/xadmin.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/js/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/respond.min.js"></script>

    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>

<body class="sticky-header" style="background: #e4e7ea">

<section>
        <!--主题部分-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            学生信息编辑表
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table editable-table ">
                                <div class="clearfix">
                                    <div class="btn-group" style="color: green">
                                        <button id="editable-sample_new" class="btn btn-primary" onclick="addStudent()">
                                            &nbsp;添加学生<i class="fa fa-plus"></i></button>

                                        <%--学院、班级选择--%>
                                        <select id="selCollege">

                                        </select>
                                        <%--展示班级名称--%>
                                        <select id="selClass">

                                        </select>
                                    </div>

                                    <%--用于条件搜索--%>
                                    <div class="btn-group pull-right">
                                        <input type="checkbox"  id="searchCheckedbox" checked="checked">查询当前页
                                        <input type="text" id="searchInput" placeholder="请根据姓名，学号查询">
                                        <button class="button" onclick="search()">搜索</i>
                                        </button>
                                    </div>
                                </div>
                                <div class="space15"></div>
                                <table class="table table-striped table-hover table-bordered" <%--id="editable-sample"--%>>
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>学号</th>
                                        <th>班级</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th>入学日期</th>
                                        <th>联系电话</th>
                                        <th>编辑</th>
                                        <th>删除</th>
                                    </tr>
                                    </thead>
                                    <%--展示学生信息--%>
                                    <tbody id="studentInformationTable">

                                    </tbody>
                                </table>

                                <%--分页区域--%>
                                <div class="margin">
                                    每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                                    <option value="5" selected="selected">5</option>
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                </select>条数据，当前是第<span id="currentPageSpan" ></span> 页，
                                    总共<span id="totalPageSpan" ></span> 页
                                    <button class="button" onclick="firstPage()">首页</button>
                                    <button class="button" onclick="prePage()">上一页</button>
                                    <button class="button" onclick="nextPage()">下一页</button>
                                    <button class="button" onclick="lastPage()">尾页</button>
                                </div>

                                <%--编辑用户信息的模态框--%>
                                <div class="modal" id="editModal">
                                    <%--对话模态框--%>
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4>学生信息编辑</h4>
                                            </div>
                                            <div class="modal-body">
                                                <label class="control-label">学生姓名</label>
                                                <input type="text" id="nameInput" class="form-control" placeholder="请输入学生姓名" onblur="if(this.value.replace(/^ + | + $/g,'')=='')alert('姓名不能为空!!')">
                                                <%--οnblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">--%>
                                                <label class="control-label">学生学号</label>
                                                <input type="text" id="stuNumInput" class="form-control" placeholder="请输入学生学号">
                                                <label class="control-label">请选择学院</label>
                                                <select id="collegeSelect" class="form-control">

                                                </select>
                                                <label class="control-label">请选择班级</label>
                                                <select id="classSelect" class="form-control">

                                                </select>
                                                <label class="control-label">性别</label>
                                                <select id="sexSelect" class="form-control">
                                                    <option value="1">男</option>
                                                    <option value="0">女</option>
                                                </select>
                                                <label class="control-label">学生年龄</label>
                                                <input type="text" id="ageInput" class="form-control" placeholder="请输入学生年龄">
                                                <label class="control-label">学生入学日期</label>
                                                <div class="layui-inline layui-show-xs-block">
                                                    <input type="datetime-local" class="layui-input"  autocomplete="off" placeholder="开始日(默认2020-01-01）" name="start" id="joinDateInput">
                                                </div><br>
                                                <label class="control-label">学生电话</label>
                                                <input type="text" id="phoneInput" class="form-control" placeholder="请输入学生联系电话" >
                                                <input type="hidden" id="studentIdInput" ><%--方便后面获取用户id，进行操作--%>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="button" data-dismiss="modal">取消</button>
                                                <button class="button" onclick="editConfirm()">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--主题部分结束-->
</section>
</body>
<!-- 将js放在文档的末尾，这样页面加载速度更快 -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>

<!--数据表-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--所有页面的通用脚本-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--可编辑表的脚本-->
<script src="${pageContext.request.contextPath}/static/js/editable-table.js"></script>

<!--  JAVASCRIPTS 结束 -->
<script>
    Date.prototype.toLocaleString = function () {
        function addZero(num) {
            if (num < 10)
                return "0" + num;
            return num;
        }

        // 按自定义拼接格式返回
        if (this.getFullYear() == 1970 && this.getMonth() == 0 && this.getDate() == 1) return null;
        return this.getFullYear() + "-" + addZero(this.getMonth() + 1) + "-" + addZero(this.getDate());
    };

    jQuery(document).ready(function() {
        EditableTable.init();
    });

   /* layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;
        // 监听全选
        form.on('checkbox(checkall)', function(data){
            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#joinDateInput' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });*/

    //文档加载事件
    $(function () {
        //loadList();
        loadListByPage();
        selCollegeNameList();
    });
    //分页准备
    //当前页数
    var currentPage = 1;
    //默认每页的记录个数
    var pageSize = 5;
    //总共页数
    var totalPage;
    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        var classIdValue = $("#selClass").val();
            loadListByPage();
    }
    //首页回调函数
    function firstPage() {
        currentPage = 1;
            loadListByPage();
    }
    //上一页回调函数
    function prePage() {
        currentPage--;
        if (currentPage < 1){
            currentPage = 1;
        }
        var classIdValue = $("#selClass").val();
            loadListByPage();
    }
    //下一页回调函数
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        var classIdValue = $("#selClass").val();
            loadListByPage();
    }
    //尾页回调函数
    function lastPage() {
        currentPage = totalPage;
        var classIdValue = $("#selClass").val();
            loadListByPage();
    }
    //分页函数
    function loadListByPage() {
        $.ajax({
            url:"${pageContext.request.contextPath}/page/loadListByPage",
            type:'get',
            data: {
                "currentPage":currentPage,
                "pageSize":pageSize
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    showList(result.studentList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        })
    }

    //搜索学院名称
    function selCollegeNameList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/page/selCollegeNameList",
            type:'get',
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showCollegeList(result.collegeNameList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
    /*展示学院名称*/
    function showCollegeList(collegeNameList) {
        var html = '';
        html += "<option value='0'>---请选择学院---</option>";
        for (var i = 0;i < collegeNameList.length;i++){
            //获取到一个班级的信息
            var item = collegeNameList[i];
            html += "<option value='"+ item.collegeId + "'>" + item.name +"</option>";
        }
        $("#selCollege").html(html);
        $("#collegeSelect").html(html);
    }

    //显示学生数据信息
    function showList(studentList) {
        var html = '';
        if(studentList != 0) {
            //遍历userList数组
            for (var i = 0; i < studentList.length; i++) {
                //获取到一个用户的信息
                var item = studentList[i];
                html += "<tr>";
                html += "<td>" + item.studentId + "</td>";
                html += "<td>" + item.name + "</td>";
                html += "<td>" + item.stuNum + "</td>";
                html += "<td>" + item.aClass.name +"</td>";
              /*  if (item.classId == 1) {
                    html += "<td>JAVA1班</td>";
                } else if (item.classId == 2) {
                    html += "<td>JAVA2班</td>";
                } else if (item.classId == 3) {
                    html += "<td>嵌入式1班</td>";
                } else {
                    html += "<td>H51班</td>";
                }*/
                if (item.sex == 0) {
                    html += "<td>女</td>";
                } else {
                    html += "<td>男</td>";
                }
                html += "<td>" + item.age + "</td>";
                html += "<td>" + item.joinDate + "</td>";
                html += "<td>" + item.phone + "</td>";
                html += "<td><button class='button' onclick='getStudentDetail(\"" + item.studentId + "\")'>编辑</button></td>";
                html += "<td><button id='delStudentId' class='button' onclick='delStudent(\"" + item.studentId + "\")' >删除</button></td>";
                html += "</tr>";
            }
        }else {
            html += "<tr><td colspan='10'>您所查询的记录不存在，请重新查询</td></tr>"
        }
        //展示到<tbody id="td">标签中
        $("#studentInformationTable").html(html);
    }

    //根据学院id查询班级
    function selclassListByCollegeId(collegeValue){
        $.ajax({
            url:"${pageContext.request.contextPath}/page/selClassList",
            type:'get',
            data:{
                "collegeId":collegeValue,
            },
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showClasses(result.classList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }

    //获取selCollege的jq对象，触发change事件，查询想赢的班级
    $("#selCollege").change(function(){
        var collegeValue = $("#selCollege").val();
        selclassListByCollegeId(collegeValue);
    });

    $("#collegeSelect").change(function(){
        var collegeValue = $("#collegeSelect").val();
        selclassListByCollegeId(collegeValue);
    });

    /*展示班级名称*/
    function showClasses(classList) {
        var html = '';
        html += "<option value=''>---请选择班级---</option>";
        for (var i = 0;i < classList.length;i++){
            //获取到一个班级的信息
            var item = classList[i];
            html += "<option value='"+ item.classId + "'>" + item.name +"</option>";
        }
        $("#selClass").html(html);
        $("#classSelect").html(html);
    }

    //根据班级展示学生信息
    function aa(classIdValue){
        $.ajax({
            url:"${pageContext.request.contextPath}/page/selStudentsByClassId",
            type:'get',
            data: {
                "currentPage":currentPage,
                "pageSize":pageSize,
                "classId":classIdValue,
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    showList(result.studentList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        })
    }
        $("#selClass").change(function() {
            var classIdValue = $("#selClass").val();
            aa(classIdValue);
            /*$.ajax({
                url:"${pageContext.request.contextPath}/page/selStudentsByClassId",
                type:'get',
                data: {
                    "currentPage":currentPage,
                    "pageSize":pageSize,
                    "classId":classIdValue,
                },
                dataType:'json',
                success:function (result) {
                    if (result.code==0){
                        showList(result.studentList);
                        totalPage = result.totalPage;
                        $("#totalPageSpan").html(totalPage);
                        $("#currentPageSpan").html(currentPage);
                    }
                },
                error:function (err) {
                    console.log(JSON.stringify(err))
                }
            })*/
    });


    //添加学生
    function addStudent() {
             showEditModel();
    }



    //学生信息添加，编辑模态框
    function showEditModel(student) {
        if(student != null){
            $("#studentIdInput").val(student.studentId);
            $("#nameInput").val(student.name);
            $("#stuNumInput").val(student.stuNum);
            $("#classSelect").val(student.cname);
            $("#sexSelect").val(student.sex);
            $("#ageInput").val(student.age);
           // $("#joinDateInput").val(new Date(student.joinDate).toLocaleString());
            $("#joinDateInput").val(student.joinDate);
            $("#phoneInput").val(student.phone);
            $("#stuNumInput").attr("disabled","disabled");//让学号不可更改
        }else {
            $("#studentIdInput").val(0);
            $("#nameInput").val("");
            $("#stuNumInput").val("");
            $("#classSelect").val("1");
            $("#sexSelect").val(1);
            $("#ageInput").val("");
            $("#joinDateInput").val("");
            $("#phoneInput").val("");
            $("#stuNumInput").removeAttr("disabled");
        }
        $("#editModal").modal("show");
    }

    //学生信息添加函数
    function editConfirm() {
        var studentIdValue = $("#studentIdInput").val();
        var nameValue = $("#nameInput").val();
        var stuNumValue = $("#stuNumInput").val();
        var classValue = $("#classSelect").val();
        var sexValue = $("#sexSelect").val();
        var ageValue = $("#ageInput").val();
        var joinDateValue = $("#joinDateInput").val();
        var phoneValue = $("#phoneInput").val();

        var dataValue = {studentId:studentIdValue,name:nameValue,stuNum:stuNumValue,classId:classValue,
                         sex:sexValue,age:ageValue,joinDate:joinDateValue,phone:phoneValue};
        $.ajax({
            url:"${pageContext.request.contextPath}/page/edit",
            type:'post',
            contentType:'application/x-www-form-urlencoded',//指明是一个表单格式
            data: dataValue,
            dataType: 'json',
            success:function (info) {
                if (info.code==0) {
                    layer.msg(info.message, {
                        icon: 1,time:2000,
                    }, function() {
                        $("#editModal").modal("hide");
                        loadGradeTable();
                    });
                }else {
                    alert(info.message);
                }
            },
            error:function (info) {

            }
        })
    }

    /*获取一个用户详细信息*/
    function getStudentDetail(studentId) {
        $.ajax({
            url:"${pageContext.request.contextPath}/page/getStudentDetailById",
            type:'get',
            data: {
                "studentId": studentId,
            },
            dataType: 'json',
            success: function (result) {
                if (result.code==0) {
                    showEditModel(result.student);
                }else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //删除学生信息
    function delStudent(studentId) {
        $.ajax({
            url:"${pageContext.request.contextPath}/page/delStudent",
            type:'get',
            data:{
                "studentId":studentId,
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    loadListByPage();
                }
                layer.msg(result.message,{icon: 6,time:3000});
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
        //重新加载分页页面
        loadListByPage();
    }

    //迷糊查询板块（根据学生姓名或者学号）
    function search() {
        var searchValue = $("#searchInput").val();

        //$("input[id='searchCheckedbox']").attr("checked", value == 1 ? true : false)
        //$("#searchCheckedbox").attr("checked") ? value = 1 : value = 0;
        var searchCheckedBoxValue;
        //判断复选框是否选中
        if ($("#searchCheckedbox").is(':checked')){
            searchCheckedBoxValue = 1;
        }else {
            searchCheckedBoxValue = 0;
        }
        $.ajax({
            url:"${pageContext.request.contextPath}/page/searchStudents",
            type:'get',
            data:{
                "currentPage":currentPage,
                "pageSize":pageSize,
                "searchValue":searchValue,
                "searchBox":searchCheckedBoxValue,
            },
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showList(result.students)
                }else {
                    showList(0);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        })
    }



</script>

</body>
</html>

